<template>
  <div id="app">
    <el-container class="app-container">
      <!-- 顶部横幅 -->
      <TopBanner v-if="showHeader" />
      
      <!-- 顶部导航 -->
      <Header v-if="showHeader" />
      
      <!-- 主内容区 -->
      <el-main class="app-main" :class="{ 'no-header': !showHeader }">
        <router-view />
      </el-main>
      
      <!-- 底部 -->
      <el-footer v-if="showFooter" class="app-footer">
        <div class="footer-content">
          <div class="brand">启航——新生代智能在线学习平台</div>
          <div class="footer-links">
            <a href="#">课程</a>
            <span class="sep">·</span>
            <a href="#">关于</a>
            <span class="sep">·</span>
            <a href="#">隐私</a>
            <span class="sep">·</span>
            <a href="#">条款</a>
            <span class="sep">·</span>
            <a href="#">联系</a>
          </div>
          <div class="copy">© {{ new Date().getFullYear() }} 启航——新生代智能在线学习平台 · All rights reserved</div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import Header from '@/components/Layout/Header.vue'
import TopBanner from '@/components/Layout/TopBanner.vue'

const route = useRoute()

// 控制布局显示
const showHeader = computed(() => {
  const hideHeaderPages = ['/login', '/register']
  return !hideHeaderPages.includes(route.path)
})

const showFooter = computed(() => {
  const hideFooterPages = ['/login', '/register', '/health']
  return !hideFooterPages.includes(route.path)
})
</script>

<style>
/* 导入My MOOC风格设计系统 */
@import './styles/variables.css';
@import './styles/base.css';
@import './styles/components.css';

/* 应用特定样式 */
body {
  background-color: var(--bg-secondary);
}

#app {
  min-height: 100vh;
}

.app-container {
  min-height: 100vh;
}

.app-main {
  padding: 0;
  min-height: calc(100vh - 64px - 60px); /* 减去header和footer高度 */
}

.app-main.no-header {
  min-height: calc(100vh - 60px);
}

.app-footer {
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  padding: var(--space-5) 0;
  height: 60px;
}

.footer-content {
  max-width: var(--container-xl);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--space-5);
}

.brand { 
  font-weight: var(--font-weight-bold); 
  color: var(--text-primary); 
}

.copy { 
  text-align: right; 
  color: var(--text-secondary); 
  font-size: var(--font-size-sm);
}

.footer-links {
  display: inline-flex;
  gap: var(--space-3);
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
  font-size: var(--font-size-sm);
}

.footer-links a:hover {
  color: var(--primary-blue);
}

.footer-links .sep { 
  color: var(--text-muted); 
}

/* Element Plus 样式覆盖 */
.el-menu--horizontal > .el-menu-item {
  border-bottom: 2px solid transparent;
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom-color: #409eff;
  color: #409eff;
}

.el-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-button {
  border-radius: 8px;
}

.el-input__wrapper {
  border-radius: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  
  .footer-links {
    gap: 15px;
  }
}

/* 页面过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
